<?php
echo $this->loadJs();
echo $this->loadCss();
echo $this->headScript()
        ->appendFile($this->baseUrl() . "/js/guacamole/guacamole.js")
        ->appendFile($this->baseUrl() . "/js/guacamole/keyboard.js")
        ->appendFile($this->baseUrl() . "/js/guacamole/layer.js")
        ->appendFile($this->baseUrl() . "/js/guacamole/mouse.js")
        ->appendFile($this->baseUrl() . "/js/guacamole/tunnel.js");
//->appendFile($this->baseUrl() . "/js/guacamole/client-ui.js");
?>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
</head>

<input type="hidden" value="<?php echo $this->port; ?>" id="port"/>
<input type="hidden" value="<?php echo $this->hostName; ?>" id="hostname"/>

<script type="text/javascript">
    $(document).ready(function() {
        /* <![CDATA[ */
// Get display div from document
        var display = document.getElementById("display");
//    var display = $("#display");
        console.log(display);
// Instantiate client, using an HTTP tunnel for communications.
        var guac = new Guacamole.Client(
                new Guacamole.HTTPTunnel("/guac/tunnel")
                );
        console.log(guac);
// Add client to display div
        display.appendChild(guac.getDisplay());
// Error handler
        guac.onerror = function(error) {
            alert(error);
        };

        var parameter = "host=" + $('#hostname').val() + "&" + "port=" + $('#port').val();
// Calculate optimal width/height for display
        var optimal_width = window.innerWidth;
        var optimal_height = window.innerHeight;
// Scale width/height to be at least 600x600
        if (optimal_width < 600 || optimal_height < 600) {
            var scale = Math.max(600 / optimal_width, 600 / optimal_height);
            optimal_width = Math.floor(optimal_width * scale);
            optimal_height = Math.floor(optimal_height * scale);
        }
        parameter = parameter + "&width=" + optimal_width + "&height=" + optimal_height;
// Connect
        guac.connect(parameter);
// Disconnect on close
        window.onunload = function() {
            guac.disconnect();
        };
// Mouse
        var mouse = new Guacamole.Mouse(guac.getDisplay());
        var touch = new Guacamole.Mouse.Touchpad(guac.getDisplay());
        touch.onmousedown = touch.onmouseup = touch.onmousemove =
                mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
                function(mouseState) {
                    guac.sendMouseState(mouseState);
////             Determine mouse position within view
//                    var mouse_view_x = mouseState.x + guac.getDisplay().offsetLeft - window.pageXOffset;
//                    var mouse_view_y = mouseState.y + guac.getDisplay().offsetTop - window.pageYOffset;
//
//                    // Determine viewport dimensioins
//                    var view_width = GuacUI.Client.viewport.offsetWidth;
//                    var view_height = GuacUI.Client.viewport.offsetHeight;
//
//                    // Determine scroll amounts based on mouse position relative to document
//
//                    var scroll_amount_x;
//                    if (mouse_view_x > view_width)
//                        scroll_amount_x = mouse_view_x - view_width;
//                    else if (mouse_view_x < 0)
//                        scroll_amount_x = mouse_view_x;
//                    else
//                        scroll_amount_x = 0;
//
//                    var scroll_amount_y;
//                    if (mouse_view_y > view_height)
//                        scroll_amount_y = mouse_view_y - view_height;
//                    else if (mouse_view_y < 0)
//                        scroll_amount_y = mouse_view_y;
//                    else
//                        scroll_amount_y = 0;
//
//                    // Scroll (if necessary) to keep mouse on screen.
//                    window.scrollBy(scroll_amount_x, scroll_amount_y);
//
//                    // Scale event by current scale
//                    var scaledState = new Guacamole.Mouse.State(
//                            mouseState.x / guac.getScale(),
//                            mouseState.y / guac.getScale(),
//                            mouseState.left,
//                            mouseState.middle,
//                            mouseState.right,
//                            mouseState.up,
//                            mouseState.down);
//
//                    // Send mouse event
//                    guac.sendMouseState(scaledState);
                };
//        var touch = new Guacamole.Mouse.Touchpad(guac.getDisplay());
//        
//    touch.onmousedown = touch.onmouseup = touch.onmousemove =
//    mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
//        function(mouseState) {
//       
//            // Determine mouse position within view
//            var mouse_view_x = mouseState.x + guac.getDisplay().offsetLeft - window.pageXOffset;
//            var mouse_view_y = mouseState.y + guac.getDisplay().offsetTop  - window.pageYOffset;
//
//            // Determine viewport dimensioins
//            var view_width  = GuacUI.Client.viewport.offsetWidth;
//            var view_height = GuacUI.Client.viewport.offsetHeight;
//
//            // Determine scroll amounts based on mouse position relative to document
//
//            var scroll_amount_x;
//            if (mouse_view_x > view_width)
//                scroll_amount_x = mouse_view_x - view_width;
//            else if (mouse_view_x < 0)
//                scroll_amount_x = mouse_view_x;
//            else
//                scroll_amount_x = 0;
//
//            var scroll_amount_y;
//            if (mouse_view_y > view_height)
//                scroll_amount_y = mouse_view_y - view_height;
//            else if (mouse_view_y < 0)
//                scroll_amount_y = mouse_view_y;
//            else
//                scroll_amount_y = 0;
//
//            // Scroll (if necessary) to keep mouse on screen.
//            window.scrollBy(scroll_amount_x, scroll_amount_y);
//
//            // Scale event by current scale
//            var scaledState = new Guacamole.Mouse.State(
//                    mouseState.x / guac.getScale(),
//                    mouseState.y / guac.getScale(),
//                    mouseState.left,
//                    mouseState.middle,
//                    mouseState.right,
//                    mouseState.up,
//                    mouseState.down);
//
//            // Send mouse event
//            guac.sendMouseState(mouseState);
//        };

// Keyboard
        var keyboard = new Guacamole.Keyboard(document);
        keyboard.onkeydown = function(keysym) {
            guac.sendKeyEvent(1, keysym);
        };
        keyboard.onkeyup = function(keysym) {
            guac.sendKeyEvent(0, keysym);
        };
        /* ]]> */
    });
</script>
<div id="display">
</div>
<!--div class="span1"></div>
<div class="span10">
    
</div>
<div class="span1"></div-->